<template>
  <div v-if="navList.length > 0" class="setting-nav">
    <div class="content">
      <div
        v-for="(item, index) in navList"
        :key="index"
        :class="{ active: item.option === activeItem, item: true }"
        class="pointer"
        @click="changeItem(item.option)"
      >
        <span class="icon"> <i :class="[item.icon]" :style="{ color: item.color }"> </i> </span>
        <div :class="{ tarName: item.option === activeItem }"
          >{{ item.title }}&nbsp;&nbsp;<i v-if="item.show" class="fas fa-flower"></i
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
  import { onUnmounted, ref } from 'vue';
  import VueEvent from '@/helper/model/event';
  export default {
    name: 'SettingNav',
    props: {
      activeName: {
        type: String,
        default: '',
      },
      navList: {
        type: Array,
        default: () => [
          { icon: 'fal fa-acorn', title: 'operation', color: 'edcf62', option: 'safety' },
        ],
        requires: true,
      },
    },
    emits: ['changeNavItem'],
    setup(props, { emit }) {
      // 默认显示的页面
      let activeItem = ref(props.activeName);
      const temp = ref(null);
      // 切换bar
      const changeBar = (bol) => {
        // 判断是否允许跳转
        if (bol) {
          // 只有有值的情况下才允许跳转
          if (temp.value) {
            activeItem.value = temp.value;
            // 通知父组件切换页面
            emit('changeNavItem', activeItem.value);
          }
        }
      };
      const changeItem = (option) => {
        temp.value = option;
        // 保存
        VueEvent.emit('isSave');
        changeBar();
      };
      // 搜索后的跳转
      const triggerBar = (data) => {
        const { name, parentName } = { ...data };
        // 判断是否是二级页面
        if (parentName) {
          activeItem.value = parentName;
          emit('changeNavItem', activeItem.value);
          // 跳转到三级页面
          setTimeout(() => {
            VueEvent.emit('toSubpage', data);
          }, 0);
          // 三级子页面的滚动
          setTimeout(() => {
            VueEvent.emit('fadeScrollSed', data);
          }, 10);
        } else {
          activeItem.value = name;
          emit('changeNavItem', activeItem.value);
          // 二级子页面的滚动
          setTimeout(() => {
            VueEvent.emit('closeSecondary');
            VueEvent.emit('fadeScroll');
          }, 0);
        }
        // 保存唯一标识
        localStorage.setItem('classKey', data.key);
      };

      // 监听事件
      VueEvent.on('saveResult', changeBar);
      VueEvent.on('trigger', triggerBar);
      // 事件销毁
      onUnmounted(() => {
        VueEvent.off('saveResult', changeBar);
        VueEvent.off('trigger', triggerBar);
      });

      return { changeItem, activeItem };
    },
  };
</script>

<style lang="less" scoped>
  .setting-nav {
    width: 240px;
    height: 938px;
    .active {
      background: #e2e2e2;
    }
    .pointer {
      &:hover {
        cursor: pointer;
      }
    }
    .tarName {
      font-weight: 700;
    }

    background: #f0f2f5;
    .content {
      width: 230px;
      height: 100%;
      background: #fff;
    }
    .item {
      width: 230px;
      height: 50px;
      display: flex;
      align-items: center;
      padding-left: 20px;
      font-size: 14px;
      .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        // width: 32px;
        // height: 32px;
        font-size: 32px;
        border-radius: 50%;
        margin-right: 10px;
        i {
          display: flex;
          align-items: center;
          justify-content: center;
          line-height: 32px;
          font-size: 32px;
          width: 32px;
          height: 32px;
          border-radius: 50%;
        }
      }
    }
  }
</style>
